<template>
	<!-- 轮播图 -->
	<view>
		<uni-swiper-dot class="uni-swiper-dot-box" :mode="nav" field="content">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
				<swiper-item v-for="e in myDetail.goods_images" :key="e.file_id">
					<img :src="e.preview_url" alt="" class="img">
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
	<!-- 详细 -->
	<view class="bar">
		<view class="tap">
			<view class="left">
				<span class="one">￥</span>
				<p class="two">{{myDetail.goods_price_max}}</p><span class="three">￥{{myDetail.line_price_max}}</span>
			</view>
			<view class="right">
				已售{{myDetail.goods_sales}}件
			</view>
		</view>
		<view class="bottom">
			{{myDetail.goods_name}}
		</view>
	</view>
	<!-- 弹窗 -->
	<view class="dat">
		<view class="left">
			<uni-icons type="checkmarkempty" color="red" size="13"></uni-icons>
			<p class="sty">七天无理由退款</p>
			<uni-icons type="checkmarkempty" color="red" size="13"></uni-icons>
			<p>48小时发货</p>
		</view>
		<view class="bottom">
			<uni-icons type="forward" size="18" @tap='open'></uni-icons>
		</view>
	</view>
	<!-- 普通弹窗 -->
	<view>
		<uni-popup ref="popup">
			<view class="prop">
				<view class="tap">
					<p class="txt">服务</p>
					<uni-icons type="closeempty" size="18" @tap='close' class="icon"></uni-icons>
				</view>
				<view class="bottom">
					<view class="a">
						<view class="day">
							<uni-icons type="checkmarkempty" color="red" size="13"></uni-icons>
							<p class="p1">七天无理由退款</p>
						</view>
						<p class="p2">满足相应条件时，消费之可申请7天无理由退货</p>
					</view>
					<view class="b">
						<view class="hous">
							<uni-icons type="checkmarkempty" color="red" size="13"></uni-icons>
							<p class="p1">48小时发货</p>
						</view>
						<p class="p2">下单后48小时之内发货</p>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
	<!-- 评价 -->
	<view class="Evalue">
		<view class="top">
			<view class="left">
				商品评价(6)条
			</view>
			<view class="right">
				查看更多<uni-icons type="forward" size="14"></uni-icons>
			</view>
		</view>

		<view class="list">
			<view class="pL">
				<view class="peop">
					<img src="./tx.png" alt="" class="img">
					<p class="p1">恐龙扛狼</p><uni-rate size="10" :readonly="true" :value="4" />
				</view>
				<p class="p2">质量很不错，不是很喜欢</p>
				<p class="p3">2023-03-25 15:22:10</p>
			</view>
			<view class="pL">
				<view class="peop">
					<img src="./tx.png" alt="" class="img">
					<p class="p1">布鲁biu布鲁biu</p><uni-rate size="10" :readonly="true" :value="5" />
				</view>
				<p class="p2">质量很不错，喜欢</p>
				<p class="p3">2023-03-25 15:22:10</p>
			</view>
		</view>
	</view>
	<!-- 商品描述 -->
	<view class="detail">
		<p class="top">商品描述</p>
		<view class="bottom">
			<mp-html :content="myDetail.content" />
		</view>
	</view>
	<!-- 底部 -->
	<view class="btoBar">
		<uni-section>
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</uni-section>
	</view>
	<!-- 添加购物车弹窗 -->
	<view>
		<uni-popup ref="shop">
			<view class="shop">
				<view class="top">
					<view class="left">
						<img :src="myDetail.goods_image" alt="" class="img">
					</view>
					<view class="right">
						<p class="p1">￥{{myDetail.goods_price_max}}</p>
						<p class="p2">库存：{{myDetail.stock_total}}</p>
					</view>
				</view>
				<view class="bottom">
					<view class="left">
						数量
					</view>
					<view class="left">
						<uni-number-box v-model="num" :min="1" @change="getNum(num)"></uni-number-box>
					</view>
				</view>
				<button class="btn" @tap="addCart">加入购物车</button>
				<uni-icons type="closeempty" size="20" class="close" @tap='shopClose'></uni-icons>
			</view>
		</uni-popup>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import store from "../../store";
	// *****************打开底部弹窗
	const popup = ref(null)
	const open = () => {
		popup.value.open('bottom')
	}
	const close = () => {
		popup.value.close()
	}
	// *****************底部菜单栏
	const options = ref([{
		icon: 'shop',
		text: '首页',
		infoBackgroundColor: '#007aff',
		infoColor: "red"
	}, {
		icon: 'cart',
		text: '购物车',
		info: 2
	}])
	const buttonGroup = ref([{
			text: '加入购物车',
			backgroundColor: '#ff0000',
			color: '#fff'
		},
		{
			text: '立即购买',
			backgroundColor: '#ffa200',
			color: '#fff'
		}
	])

	const onClick = (e) => {
		if (e.content.text == '首页') {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
		if (e.content.text == '购物车') {
			if (!store.state.user.userInfo.token) {
				uni.showModal({
					title: '温馨提示',
					content: '此时此刻需要您登录喔~',
					confirmText: "去登录",
					cancelText: "再逛会",
					success: res => {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}
						if (res.cancel) {
							uni.switchTab({
								url: "/pages/index/index"
							})
						}
					}
				})
				return
			}
			uni.switchTab({
				url: '/pages/cart/cart'
			})
		}
	}
	// 购物车
	const shop = ref(null)
	// 关闭购物车
	const shopClose = () => {
		shop.value.close()
	}
	const buttonClick = (e) => {
		if (e.content.text === '加入购物车') {
			if (!store.state.user.userInfo.token) {
				uni.showModal({
					title: '温馨提示',
					content: '此时此刻需要您登录喔~',
					confirmText: "去登录",
					cancelText: "再逛会",
					success: res => {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}
						if (res.cancel) {
							uni.switchTab({
								url: "/pages/index/index"
							})
						}
					}
				})
				return
			}
			shop.value.open('bottom')
		}
		if (e.content.text === '立即购买') {
			return
		}
	}
	// ********************************主业务
	import {
		goodsDetailApi,
		addCartApi,
		cartTotalApi
	} from '@/apis/detail.js'
	const myDetail = ref({})
	const goodsId = ref('')
	onLoad((params) => {
		goodsDetail(params.id)
		cartTotal()
	})
	// 购物车总数
	const cartTotal = async () => {
		const {
			data: {
				cartTotal
			}
		} = await cartTotalApi()
		options.value[1].info = cartTotal
	}
	// 商品信息
	const goodsDetail = async (id) => {
		const {
			data: {
				detail
			}
		} = await goodsDetailApi(id)
		myDetail.value = detail
		goodsId.value = detail.goods_id
	}
	// *****************************加入购物车
	const num = ref(1)
	// 获取总数
	const getNum = (e) => {
		num.value = e
	}
	const addCart = async () => {
		const res = await addCartApi(goodsId.value, num.value)
		if (res.status !== 200) return
		uni.showToast({
			title: res.message
		})
		shop.value.close()
	}
</script>

<style lang="scss" scoped>
	.swiper {
		width: 100%;
		height: 480rpx;

		.img {
			width: 100%;
			height: 480rpx;
		}
	}

	.bar {
		padding: 18rpx 22rpx;
		margin-bottom: 14rpx;
		background: #fff;

		.tap {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;

				.one {
					color: red;
					font-size: 20rpx;
					line-height: 20rpx;
				}

				.two {
					color: red;
					font-size: 31rpx;
				}

				.three {
					margin-left: 5rpx;
					margin-top: 10rpx;
					color: #959595;
					font-size: 19rpx;
					text-decoration: line-through;
				}

			}

			.right {
				font-size: 20rpx;
				color: #959595;
			}
		}

		.bottom {
			font-size: 22rpx;
		}
	}

	.dat {
		height: 34rpx;
		padding: 17rpx 22rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			display: flex;
			font-size: 19rpx;

			.sty {
				margin-right: 15rpx;
			}
		}
	}

	.Evalue {
		background: #fff;
		padding: 14rpx 22rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				font-size: 20rpx;
			}

			.right {
				margin-right: 5rpx;
				font-size: 18rpx;
				color: #999;
				line-height: 18rpx;
			}
		}

		.list {
			.pL {
				.peop {
					display: flex;
					align-items: center;
					margin-top: 30rpx;
					margin-left: -14rpx;

					.img {
						width: 50rpx;
						height: 50rpx;
					}

					.p1 {
						font-size: 17rpx;
					}
				}

				.p2 {
					font-size: 19rpx;
				}

				.p3 {
					font-size: 17rpx;
					color: #999;
					margin-top: 7rpx;
				}
			}
		}
	}

	.prop {
		width: 100%;
		height: 365rpx;
		background: #fff;
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;

		.tap {
			padding-top: 20rpx;
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			font-weight: 700;

			.txt {
				text-align: center;
				flex: 1;
			}

			.icon {
				width: 22rpx;
				height: 22rpx;
				font-weight: 400;
			}
		}

		.bottom {
			padding: 14rpx 24rpx;

			.p1 {
				margin-top: 10rpx;
				padding-top: 2rpx;
				font-size: 20rpx;
				line-height: 20rpx;
			}

			.p2 {
				margin-bottom: 20rpx;
				font-size: 19rpx;
				margin-top: 14rpx;
				color: #6d6d6d;
				line-height: 19rpx;
			}

			.a {
				display: flex;
				flex-direction: column;

				.day {
					display: flex;
				}
			}

			.b {
				display: flex;
				flex-direction: column;

				.hous {
					display: flex;
				}
			}
		}
	}

	.detail {
		background: #fff;
		padding-bottom: 80rpx;

		.top {
			margin-left: 20rpx;
			font-size: 32rpx;
		}

		.bottom {
			.img {
				width: 100%;
			}
		}
	}

	.btoBar {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.shop {
		width: 100%;
		height: 360rpx;
		background: #fff !important;
		position: relative;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;

		.close {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
		}

		.top {
			display: flex;
			padding: 22rpx 18rpx 0rpx;

			.left {
				.img {
					width: 134rpx;
					height: 134rpx;
				}
			}

			.right {
				padding-top: 66rpx;
				margin-left: 20rpx;

				.p1 {
					font-size: 35rpx;
					color: #fe560a;
				}

				.p2 {
					font-size: 17rpx;
					color: #525252;
					margin-bottom: 10rpx;
				}
			}
		}

		.bottom {
			padding: 0rpx 18rpx;
			display: flex;
			justify-content: space-between;
		}

		.btn {
			margin-top: 50rpx;
			width: 650rpx;
			height: 60rpx;
			border: none;
			background: #ff9402;
			color: #fff;
			border-radius: 50rpx;
			font-size: 20rpx;
		}
	}

	::v-deep .uni-section-header {
		display: none !important;
	}
</style>